<template>
    <div class="shopcar">
        <div class="header">
            <div @click="back()">
                <i class="iconfont icon-xiangzuojiantou "></i>
            </div>
            <div>
                <span>购物车({{content.length}})</span>
            </div>
            <div>
                <span>编辑</span>
            </div>
            <div>
                <i class="iconfont icon-xiaoxizhongxin"></i>
            </div>
        </div>
        <div v-for="(item , i ) of content" :key="'a'+i" class="shop">
            <input type="checkbox" name="" id="">
            <div class="shopimg">
                <img :src="item['img']" alt="">
            </div>
            <div class="shopcontent ">
                <p>{{ item.title }}</p>
                <p>
                    <b>￥{{ item.price }} </b>
                    <span>￥{{ item.orgPrice }}</span>
                </p>
            </div>
        </div>
        <div v-if="!content.length">
            暂无添加购物车商品
        </div>
        <FootBar/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            content: [],
            result: []
        };
    },
    methods: {
        addM() {
            let a = localStorage.getItem("cart");
            if (a) {
                this.result = a.split("~");
                for (const item of this.result) {
                    this.content.push(JSON.parse(item));
                }
                console.log(this.content);
            }
        },
        back() {
            this.$router.go(-1);
        }
    },
    components: {},
    mounted() {
        this.addM();
    }
};
</script>

<style lang='less' scoped>
.shopcar {
    background: #eee;
    .header {
        display: flex;
        justify-content: space-between;
        height: 80px;
        line-height: 100px;
        div:nth-child(1) {
            width: 50px;
        }
        div:nth-child(2) {
            width: 500px;
            padding-left: 300px;
        }
        div:nth-child(3) {
            width: 100px;
        }
        div:nth-child(4) {
            width: 100px;
        }
    }
    .shop {
        background: #ffffff;
        display: flex;
        margin-top: 30px;
        padding: 20px 20px 20px 0;
        input {
            margin-left: 30px;
            margin-top: 30px;
        }
        .shopimg {
            margin-left: 30px;
            img {
                width: 120px;
                height: 200px;
            }
        }
        .shopcontent {
            flex: 1;
            margin-left: 30px;
            p {
                b {
                    font-size: 30px; /*px*/
                }
            }
        }
    }
}
</style>
